<template>
  <!--
      封装的布局组件 使用element-ui的layout组件
      包含Header、Aside、Main三个组件
      其中Aside、Header、Main三个组件是自定义的组件
      Main展示内容区域
   -->
  <el-container class="layout-container-demo">
    <el-header class="layout-header-demo">
      <Header/>
    </el-header>
    <el-main class="disabled-main-demo">
      <Main/>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import Aside from '@/components/elementLayot/Aside.vue';
import Header from '@/components/elementLayot/Header.vue';
import Main from '@/components/elementLayot/Main.vue'

</script>

<style scoped>
/*
  容器样式
*/
.layout-container-demo {
  height: 100vh !important;
  background-color: #F6FAFF;
}

/*
  头部样式
*/
.layout-header-demo {
  background-color: white;
  height: 65px;
  font-size: 18px;
  color: #fff;
}

.disabled-main-demo {
  padding: 10px 10px 20px 10px;
}
</style>
